<template>
  <div class="edit-box">
    <el-dialog width="400px" title="修改下单/提交折扣" v-model="dialogFormVisible" :draggable="true" @close="dialogClose">
      <div>
        <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules">
          <el-form-item prop="orderDiscount" label="下单折扣">
            <el-input v-model="dialogForm.orderDiscount" type="number" min="0" max="100" placeholder="请输入下单折扣"
              @keypress.enter="submitHandle">
              <template #append>%</template>
            </el-input>
          </el-form-item>
          <el-form-item prop="submitDiscount" label="提交折扣">
            <el-input v-model="dialogForm.submitDiscount" type="number" min="0" max="100" placeholder="请输入提交折扣"
              @keypress.enter="submitHandle">
              <template #append>%</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitHandle">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import api from '../api'
import { successDeal, warningDeal } from '@/utils/utils'
export default {
  setup(props, context) {
    const dialogFormRef = ref(null)

    const state = reactive({
      dialogFormVisible: false,
      dialogForm: {},
      dialogFormRules: {
        orderDiscount: [
          { required: true, message: '请输入下单折扣', trigger: 'blur' },
          {
            pattern: /^(?:[1-9]?\d|100)$/, message: '请输入0-100的整数', trigger: 'blur'
          }
        ],
        submitDiscount: [
          { required: true, message: '请输入提交折扣', trigger: 'blur' },
          {
            pattern: /^(?:[1-9]?\d|100)$/, message: '请输入0-100的整数', trigger: 'blur'
          }
        ],
      },
      incomingForm: {},
    })

    function dialogShow(data) {
      state.dialogForm = { ...data }
      state.dialogFormVisible = true
    }

    function submitHandle() {
      dialogFormRef.value.validate((valid, fields) => {
        if (valid) {
          const obj = {
            shopId: state.dialogForm.shopId || '',
            orderDiscount: state.dialogForm.orderDiscount || '',
            submitDiscount: state.dialogForm.submitDiscount || '',
          }
          api.discountModify(obj).then(res => {
            if (res.code == '200') {
              successDeal(res.msg)
              context.emit('dialogClose')
              state.dialogFormVisible = false
            } else {
              warningDeal(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }

    function dialogClose() {
      dialogFormRef.value.resetFields()
    }

    return {
      ...toRefs(state),
      dialogClose,
      submitHandle,
      dialogFormRef,
      dialogShow,
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-input-group--append) {
  > .el-input-group__append,
  .el-input-group__prepend {
    padding: 0 20px !important;
  }
}
</style>